<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>固定表格</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        table {
            border-collapse: collapse;
            width: 300px;
        }

        table th,
        table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }

        button {
            padding: 8px 16px;
            margin-top: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <table id="myTable">
    </table>
    <button id="randomTableBtn">随机生成表格</button>
    <script>
        const table = document.getElementById('myTable');
        const randomTableBtn = document.getElementById('randomTableBtn');

        function createRandomTable() {
            const headers = ['列1', '列2', '列3'];
            const data = [];
            for (let i = 0; i < 3; i++) {
                let row = [];
                for (let j = 0; j < 3; j++) {
                    row.push(Math.floor(Math.random() * 100));
                }
                data.push(row);
            }

            table.innerHTML = '';
            const headerRow = document.createElement('tr');
            headers.forEach(header => {
                const th = document.createElement('th');
                th.textContent = header;
                headerRow.appendChild(th);
            });
            table.appendChild(headerRow);

            data.forEach(rowData => {
                const row = document.createElement('tr');
                rowData.forEach(cellData => {
                    const td = document.createElement('td');
                    td.textContent = cellData;
                    row.appendChild(td);
                });
                table.appendChild(row);
            });
        }

        randomTableBtn.addEventListener('click', createRandomTable);
    </script>
</body>

</html>